<template>
  <div class="addConfig">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="25%" center>
      <el-form ref="ruleForm" :model="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="发起人" size="mini">
          <el-select
            v-model="ruleForm.userEmail"
            collapse-tags
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :disabled="sign === 'edit'"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.email"
              :label="item.userName"
              :value="item.email"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审批人" size="mini">
          <el-select
            v-model="ruleForm.passUserEmail"
            collapse-tags
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="passUser"
            :loading="loading"
          >
            <el-option
              v-for="item in passUserList"
              :key="item.email"
              :label="item.userName"
              :value="item.email"
            />
          </el-select>
        </el-form-item>

        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;border-color: #3345ff" @click="() => dialogVisible = false">取消</el-button>
          <el-button size="mini" type="primary" class="submit" @click="submitSetAdmin">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!--      // 删除-->
    <el-dialog title="确认删除" :visible.sync="qurenDel" width="20%" center>
      <div style="text-align: center">
        <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
        <p>确认后该变量将被删除，</p>
        <p>并不可恢复，是否确认删除？</p>
      </div>
      <div class="submitBox">
        <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
        <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userList, addUserProcess, deldUserProcess } from '@/api/approval'
import { getUsername } from '@/utils/authorized.js'
export default {
  name: 'Customconfig',
  data() {
    return {
      sign: 'add',
      title: '创建',
      dialogVisible: false,
      qurenDel: false,
      loading: false,
      options: [],
      passUserList: [],
      ruleForm: {
        userEmail: '',
        passUserEmail: ''
      }
    }
  },
  mounted() {

  },
  methods: {
    addHander(_list) {
      this.ruleForm = {
        userEmail: '',
        passUserEmail: ''
      }
      this.sign = 'add'
      this.title = '创建'
      this.dialogVisible = true
    },
    delHander(row) {
      this.delId = row.id
      this.qurenDel = true
    },
    async userList(query, _sign) {
      const parms = {
        current: 0,
        size: 20,
        condition: { search: query }
      }
      const res = await userList(parms)
      if (_sign === 1) {
        this.options = res.records
      } else {
        this.passUserList = res.records
      }
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.userList(query, 1)
        }, 200)
      } else {
        this.options = []
      }
    },
    passUser(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.userList(query, 0)
        }, 200)
      } else {
        this.options = []
      }
    },
    async confirmDel() {
      const res = await deldUserProcess(this.delId)
      if (res) {
        res ? this.$emit('updataList') : null
        this.$message.success('删除成功')
      } else {
        this.$message.error('删除失败')
      }
      this.qurenDel = false
    },
    async submitSetAdmin() {
      const data = this.ruleForm
      if (data.userEmail === '') {
        this.$message.error('发起人不能为空！')
        return false
      }
      if (data.passUserEmail === '') {
        this.$message.error('审批人不能为空!')
        return false
      }
      const res = await addUserProcess(this.$route.params.id, this.ruleForm, getUsername())
      res ? this.$emit('updataList') : null
      res ? this.$message.success('创建成功') : this.$message.error('创建失败')
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .submitBox{
    text-align: center;
  }
</style>
